<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>角色管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .sidebar {
            height: 100vh;
            background-color: #263238;
            width: 250px;
            position: fixed; /* Added */
            left: 0; /* Added */
            top: 0; /* Added */
        }
        .sidebar .nav-link {
            color: #fff;
            padding: 0.8rem 1.5rem;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        .sidebar .nav-link:hover {
            background-color: #37474F;
        }
        .main-content {
            background-color: #f8f9fa;
            min-height: 100vh; /* Added */
            margin-left: 250px; /* Added to offset fixed sidebar */
        }
        .card { /* Standardized */
            background-color: #ffffff;
            border-radius: 0.25rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-bottom: 1.5rem; /* Kept from original specific card style */
        }
        .card-header { /* Kept original */
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
            padding: 1rem 1.25rem;
        }
        .table th { /* Kept original */
            font-weight: 600;
            background-color: #f8f9fc;
        }
        .table-responsive { /* Added */
            background-color: #ffffff;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 定义上下文路径变量，供JS文件使用
        var contextPath = '${pageContext.request.contextPath}';
        // 当前登录用户名，供JS判断用
        window.currentUsername = '${user.username}';
    </script>
    <!-- 引入外部JS文件 -->
    <script src="${pageContext.request.contextPath}/MainPage/managePage/permissionManagement.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-auto px-0 sidebar">
            <div class="d-flex flex-column">
                <div class="p-3">
                    <h4 class="text-white">管理系统</h4>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/MainPage/managePage/Management.jsp">
                            <i class="bi bi-house-door"></i> 首页
                        </a>
                    </li>
                    
                    <!-- 检查是否有任何管理权限 -->
                    <c:if test="${not empty permission}">
                        <c:set var="hasAnyManagementPermission" value="false" />
                        <c:forEach var="perm" items="${permission}">
                            <c:if test="${perm == 5 || perm == 6 || perm == 7}">
                                <c:set var="hasAnyManagementPermission" value="true" />
                            </c:if>
                        </c:forEach>
                        
                        <c:if test="${hasAnyManagementPermission}">
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#systemSettingsSubmenu" aria-expanded="true">
                                    <i class="bi bi-gear"></i> 系统设置
                                    <i class="bi bi-chevron-down float-end"></i>
                                </a>
                                <div class="collapse show" id="systemSettingsSubmenu">
                                    <ul class="nav flex-column ms-4">
                                        <!-- 权限5：用户管理 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 5}">
                                                <li class="nav-item">
                                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/UserManagement.jsp">
                                                        <i class="bi bi-people"></i> 用户管理
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        
                                        <!-- 权限6：角色管理 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 6}">
                                                <li class="nav-item">
                                                    <a class="nav-link active text-white" href="#">
                                                        <i class="bi bi-shield-lock"></i> 角色管理
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        
                                        <!-- 权限7：角色分配 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 7}">
                                                <li class="nav-item">
                                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/RoleAssignment.jsp">
                                                        <i class="bi bi-person-check"></i> 角色分配
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </li>
                        </c:if>
                    </c:if>
                </ul>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="col main-content">
            <!-- 顶部导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                <div class="container-fluid">
                    <button class="btn btn-link">
                        <i class="bi bi-list"></i>
                    </button>
                    <div class="ms-auto d-flex align-items-center">
                        <div class="dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle"></i> ${user.username}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/MainPage/managePage/PersonalCenter.jsp"><i class="bi bi-person me-2"></i> 个人信息</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/API/user/logout"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- 内容容器 -->
            <div class="container-fluid p-4">
                <!-- 添加面包屑导航 -->
                            <nav aria-label="breadcrumb" class="bg-light p-3 mb-3">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item">
                                        <a href="${pageContext.request.contextPath}/MainPage/managePage/Management.jsp">首页</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a href="#">系统设置</a>
                                    </li>
                                    <li class="breadcrumb-item active" aria-current="page">角色管理</li>
                                </ol>
                            </nav>
                            <!-- 页面标题 -->
                            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                                <h1 class="h3 mb-0 text-gray-800">角色管理</h1>
                            </div>

                <!-- 添加搜索表单 -->
                <div class="card mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold">搜索条件</h6>
                    </div>
                    <div class="card-body">
                        <form id="searchRoleForm" class="row g-3">
                            <div class="col-md-4">
                                <label for="searchRoleName" class="form-label">角色名称</label>
                                <input type="text" class="form-control" id="searchRoleName" name="role_name" placeholder="请输入角色名称">
                            </div>
                            <div class="col-12 mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-search me-1"></i> 搜索
                                </button>
                                <button type="reset" class="btn btn-secondary ms-2">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i> 重置
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 角色管理卡片 -->
                <div class="card">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold">角色列表</h6>
                        <div>
                            <button class="btn btn-success btn-sm" id="addRoleBtn">
                                <i class="bi bi-plus-lg me-1"></i> 新增角色
                            </button>
                            <!-- 删除批量删除按钮 -->
                            <!-- <button class="btn btn-danger btn-sm ms-2" id="batchDeleteRoleBtn">
                                <i class="bi bi-trash me-1"></i> 批量删除
                            </button> -->
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="roleTable">
                                <thead>
                                <tr>
                                    <th class="text-center" style="width: 5%;">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="selectAllRoles">
                                        </div>
                                    </th>
                                    <th class="text-center" style="width: 10%;">角色ID</th>
                                    <th class="text-center" style="width: 20%;">角色名称</th>
                                    <th class="text-center" style="width: 40%;">角色描述</th>
                                    <th class="text-center" style="width: 30%;">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!-- 角色列表将由JavaScript动态生成 -->
                                </tbody>
                            </table>
                        </div>

                        <!-- 角色分页 -->
                        <nav class="mt-3">
                            <ul class="pagination justify-content-end" id="rolePagination">
                                <!-- 分页内容将由JavaScript动态生成 -->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加/编辑角色模态框 -->
<div class="modal fade" id="roleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="roleModalTitle">添加角色</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="roleForm">
                    <input type="hidden" id="roleId" name="role_id">
                    <div class="mb-3">
                        <label for="roleName" class="form-label">角色名称</label>
                        <input type="text" class="form-control" id="roleName" name="role_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="roleDescription" class="form-label">角色描述</label>
                        <textarea class="form-control" id="roleDescription" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">权限分配</label>
                        <div id="permissionCheckboxes" class="border p-3 rounded" style="max-height: 200px; overflow-y: auto;">
                            <!-- 权限复选框将由JavaScript动态生成 -->
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveRoleBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 结果提示模态框 -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="resultModalTitle">操作结果</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body" id="resultModalBody">
                <!-- 结果信息将在这里显示 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>